<template>
  <div>
    <el-card v-if="showContent">
      <el-row >
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
          <el-table-column
              align="center"
              prop="picture"
              label="图书"
              width="150">
            <template slot-scope="scope">
              <img :src="scope.row.picture" style="width: 80px;height: 80px;">
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="书名"
              width="140">
          </el-table-column>
          <el-table-column
              prop="comment"
              label="内容"
              width="140">
          </el-table-column>
          <el-table-column
              prop="subtime"
              label="评论时间"
              width="160">
            <template slot-scope="scope">
              {{ formatDate(scope.row.subtime) }}
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="60"
              header-align="center">
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center;">
                <el-button type="danger" plain icon="el-icon-delete" circle size="small" @click="deleteMyComment(scope.row)"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="pageData.currentPage"
            :page-sizes="[4, 8, 12, 16]"
            :page-size=pageData.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total">
        </el-pagination>
      </el-row>
    </el-card>

    <el-card v-else>
      <el-row>
        <el-table
            :data="contentTableData"
            stripe
            style="width: 100%">
          <el-table-column
              prop="content"
              label="贴子"
              width="300"
              :formatter="contentFormatter">
          </el-table-column>
          <el-table-column
              prop="readercomment"
              label="评论内容"
              width="120">
          </el-table-column>
          <el-table-column
              prop="commenttime"
              label="评论时间"
              width="160"
              :formatter="commenttimeFormatter">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="60"
              header-align="center">
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center;">
                <el-button type="danger" plain icon="el-icon-delete" circle size="small" @click="deleteMyReaderComment(scope.row)"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
            @size-change="postsSizeChange"
            @current-change="postsCurrentChange"
            :current-page="postsPageData.currentPage"
            :page-sizes="[6, 12, 18, 24]"
            :page-size=postsPageData.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="postsPageData.total">
        </el-pagination>
      </el-row>
    </el-card>

    <div class="post-button">
      <el-button @click="toggleContent" type="info" style="font-size: 30px;" icon="el-icon-sort" plain circle  class="custom-size"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyComment",
  data() {
    return {
      showContent: true,
      id:sessionStorage.getItem("id"),
      tableData: [],
      contentTableData: [],
      pageData: {
        currentPage: 1,
        pageSize: 4,
        total: 0
      },
      postsPageData: {
        currentPage: 1,
        pageSize: 6,
        total: 0
      }
    }
  },
  created() {
    this.showBookComment()
    this.showPosts()
  },
  methods: {
    contentFormatter(row){
      return row.content.substring(0,80)+'...'
    },
    currentChange(val){
      this.pageData.currentPage=val
      this.showBookComment()
    },
    sizeChange(val){
      this.pageData.pageSize=val
      this.showBookComment()
    },
    postsCurrentChange(val){
      this.postsPageData.currentPage=val
      this.showPosts()
    },
    postsSizeChange(val){
      this.postsPageData.pageSize=val
      this.showPosts()
    },
    toggleContent() {
      this.showContent = !this.showContent;
    },
    async showBookComment() {
      const params = {...this.pageData,id: this.id};
      const { data: res } = await this.$axios.get("/bookComment/getMyComment",{ params })
      this.tableData = res.data.records;
      this.pageData.total = res.data.total;
    },
    async showPosts() {
      const params = {...this.postsPageData,id: this.id};
      const { data: res } = await this.$axios.get("/readerComment/showPosts",{ params })
      this.contentTableData = res.data.records;
      this.postsPageData.total = res.data.total;
    },
    deleteMyComment(row){
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data:res}=await this.$axios.get("bookComment/deleteById",{params:{id:row.id}})
        if (res.success){
          this.$message.success('删除成功')
          await this.showBookComment()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteMyReaderComment(row){
      this.$confirm('此操作将永久删除该贴子评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data:res}=await this.$axios.get("readerComment/deleteById",{params:{id:row.id}})
        if (res.success){
          this.$message.success('删除成功')
          await this.showPosts()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    commenttimeFormatter(row){
      return this.formatDate(row.commenttime)
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        timeZone: 'Asia/Shanghai',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
}
}
</script>

<style scoped>
.el-pagination{
  margin-top: 10px;
}
.custom-size {
  width: 50px; /* 根据需要调整宽度 */
  height: 50px; /* 根据需要调整高度 */
  padding: 0; /* 移除默认的内边距 */
}
.post-button {
  position: fixed;
  bottom: 545px;
  right: -70px;
  z-index: 1000;
}
</style>